<template>
  <div>

    <div v-if="data.input.isUse == true">
      <div v-for="(item, index) in data.input.label">
        <el-input v-model="data.input.value[index]" style="width:220px;margin-top:20px" :placeholder="item"> </el-input>
          <el-button @click="sayInput(data.input.value[index])">click me</el-button>

      </div>

    </div>

    <div v-if="data.select.isUse == true">
      <div v-for="(item, index) in data.select.number">
        <el-select v-model="data.select.value[index]" placeholder="请选择"style="width:220px;margin-top:20px" >
          <el-option
            v-for="elment in data.select.options"
            :key="elment.value"
            :label="elment.label"
            :value="elment.value"
          >
          </el-option>
        </el-select>
          <el-button @click="saySelect(data.select.value[index])">click me</el-button>

      </div>
    </div> -->

<!-- 插槽的作用：1.使组件的可扩展性提升 
                2.我们抽取公共部分写死，将动态部分用插槽代替 
                3.在组件的标签中加入组件标签 如<zhangtong ><button></button> </zhangtong>
                4.插槽的默认值<slot><span></span></slot> 如果不在组件的标签中插入标签 那么就会默认为插槽中的元素
                5.具名插槽 为插槽加入name属性-->
<!--                 
    <slot name="left"><div style="height:100px;width:100px;background:#409EFF;margin:0 auto"></div></slot>
    <slot name="center"><div style="height:100px;width:100px;background:#67C23A;margin:0 auto"></div></slot>

    <slot name="right"><div style="height:100px;width:100px;background:#F56C6C;margin:0 auto"></div></slot>

  </div> -->
    </div>

<!-- 插槽的作用：1.使组件的可扩展性提升 
                2.我们抽取公共部分写死，将动态部分用插槽代替 
                3.在组件的标签中加入组件标签 如<zhangtong ><button></button> </zhangtong>-->
    <slot></slot>
  </div>
</template>

<script>
export default {
  props: {
    data: {
      type: Object,
    },
  },
  data() {
    return {
      saySomething: "哇偶",
    };
  },
  name: "zhangtong",
  methods: {
    sayInput(e){
        // alert(e)

        this.$emit("tellMeTheInput",e)
            // this.$emit("tellSelect",e)
    },
    saySelect(e){
            // console.log(e)

        // alert(e)
    
            this.$emit("tellSelect1",e)

    },

    wantSay(){
        console.log("我是zhnagtong组件")

        /* 1.访问父组件 $parent 但是如果如此做 改组件的复用性变差 因为不能确定每一个该组件都有对应的父组件
           2.访问跟组件 $root
            */
    }
  },

 
};
</script>

<style>
</style>